<template>
  <div>
    <el-card>
      <el-form :inline="true">
        <el-form-item label="一级分类">
          <el-select
            v-model="categoryStore.c1Id"
            @change="getCategory2"
            :disabled="changeScene"
          >
            <el-option
              v-for="(item, index) in firstCategory"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类">
          <el-select
            v-model="categoryStore.c2Id"
            @change="getCategory3"
            :disabled="changeScene"
          >
            <el-option
              :label="item.name"
              v-for="(item, index) in secondCategory"
              :key="index"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="三级分类">
          <el-select
            v-model="categoryStore.c3Id"
            @change="getAttributes"
            :disabled="changeScene"
          >
            <el-option
              :label="item.name"
              v-for="(item, index) in thirdCategory"
              :key="index"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px">
      <div v-show="!changeScene">
        <el-button
          type="primary"
          :disabled="!categoryStore.c3Id"
          @click="changeScene = !changeScene"
        >
          添加属性
        </el-button>
        <el-table
          border
          style="margin-top: 10px"
          :data="categoryStore.attributes"
        >
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="80"
          ></el-table-column>
          <el-table-column
            label="属性名称"
            align="center"
            width="120"
            prop="name"
          ></el-table-column>
          <el-table-column label="属性值名称" align="center">
            <template #="{ row }">
              <el-tag
                v-for="(val, index) in row.value"
                :key="index"
                style="margin: 5px"
              >
                {{ val }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template #="{ row }">
              <el-button
                type="primary"
                size="small"
                icon="Edit"
                @click="editAttribute(row)"
              >
                编辑
              </el-button>
              <el-popconfirm
                title="确定删除吗"
                @confirm="categoryStore.deleteAttribute(row.id)"
              >
                <template #reference>
                  <el-button icon="Delete" type="danger" size="small">
                    删除
                  </el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-show="changeScene">
        <el-form :inline="true">
          <el-form-item label="属性名称">
            <el-input
              placeholder="请输入属性名字"
              v-model="categoryStore.attributeInfo.name"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-button
          type="primary"
          icon="Plus"
          :disabled="!categoryStore.attributeInfo.name"
          @click="handleAddAttributes"
        >
          添加属性
        </el-button>
        <el-button type="info" @click="cancelOperate">取消</el-button>
        <el-table
          border
          style="margin: 20px 0"
          :data="categoryStore.attributeValue"
        >
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="80"
          ></el-table-column>
          <el-table-column
            label="属性名"
            align="center"
            prop="name"
          ></el-table-column>
          <el-table-column label="属性值" align="center" prop="value">
            <template #="{ row, $index }">
              <el-input
                v-show="!row.showText"
                v-model="row.value"
                placeholder="请输入属性值"
                @blur="inputChange(row, $index)"
                :ref="(element: any) => (inputArr[$index] = element)"
              ></el-input>
              <div
                v-show="row.showText"
                @click="showAttributeInput(row, $index)"
              >
                {{ row.value }}
              </div>
            </template>
          </el-table-column>
          <el-table-column width="120" label="操作" align="center">
            <template #="{ $index }">
              <el-button
                type="danger"
                icon="Delete"
                @click="
                  () => {
                    categoryStore.attributeValue.splice($index, 1)
                  }
                "
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" @click="saveAttributes">保存</el-button>
        <el-button type="info">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, nextTick } from 'vue'
import CategoryStoreFn from '@/store/modules/category'
import type { Category } from '@/api/category/type'
import type { Attrbiute, AttributeValue } from '@/api/attribute/type'

const categoryStore = CategoryStoreFn()

const changeScene = ref<boolean>(false)

const firstCategory = ref<Category[]>()
const secondCategory = ref<Category[]>()
const thirdCategory = ref<Category[]>()
let inputArr = ref<any>([])

const getCategory2 = async () => {
  categoryStore.c2Id = undefined
  categoryStore.c3Id = undefined
  const ok = await categoryStore.getCategory2()
  if (ok) {
    secondCategory.value = categoryStore.category2
  }
}

const getCategory3 = async () => {
  categoryStore.c3Id = undefined
  const ok = await categoryStore.getCategory3()
  if (ok) {
    thirdCategory.value = categoryStore.category3
  }
}

const getAttributes = async () => {
  await categoryStore.getCateAttributes()
}

const handleAddAttributes = () => {
  categoryStore.attributeValue.push({
    name: categoryStore.attributeInfo.name,
    value: '',
    showText: false,
  })
  nextTick(() => {
    inputArr.value[categoryStore.attributeValue.length - 1].focus()
  })
}

const saveAttributes = async () => {
  const ok = await categoryStore.saveAttribute()
  if (ok) {
    changeScene.value = false
  }
}

const cancelOperate = () => {
  changeScene.value = false
  categoryStore.attributeInfo.id = undefined
}

const editAttribute = (row: Attrbiute) => {
  changeScene.value = true
  categoryStore.attributeInfo.id = row.id
  Object.assign(categoryStore.attributeInfo, JSON.parse(JSON.stringify(row)))
  const attributeValueList: AttributeValue[] = []
  categoryStore.attributeInfo.value.forEach((item) => {
    attributeValueList.push({
      value: item,
      showText: true,
      name: categoryStore.attributeInfo.name,
    })
  })
  categoryStore.attributeValue = attributeValueList
}

const inputChange = (row: any, $index: number) => {
  if (
    categoryStore.attributeValue.every(
      (item, index) => item.value === row.value.trim() && index !== $index,
    )
  ) {
    row.value = ''
    return
  }

  row.value.length && (row.showText = true)
}

const showAttributeInput = (row: any, $index: number) => {
  row.showText = false
  nextTick(() => {
    inputArr.value[$index].focus()
  })
}

onMounted(async () => {
  const ok = await categoryStore.getCategory1()
  if (ok) {
    firstCategory.value = categoryStore.category1
  }
})
</script>

<style scoped></style>
